<template>
  <div class="app-container">
    <div class="container mb20">
      <!-- size="small" -->
      <el-form
        ref="form"
        :model="userForm"
        label-width="100px"
        label-suffix=":"
        :rules="userFormRules"
      >
        <el-form-item label="经度" prop="longitude">
          <el-input v-model="userForm.longitude"></el-input>
        </el-form-item>
        <el-form-item label="纬度" prop="latitude">
          <el-input v-model="userForm.latitude"></el-input>
        </el-form-item>
        <el-form-item label="公司简介" prop="content">
          <el-input
            type="textarea"
            :autosize="{ minRows: 5, maxRows: 10}"
            v-model="userForm.content"
          ></el-input>
        </el-form-item>
        <el-form-item label="公司图片">
          <div class="app-draggable">
            <div
              :class="canEdit ? 'dargBtn-lock el-icon-unlock' : 'dargBtn-lock el-icon-lock'"
              @click="removeEvent()"
            >
              <span>{{ canEdit? '调整图片': '锁定图片' }}</span>
              <el-tooltip
                class="item"
                effect="dark"
                content="锁定时不可移动图片,调整图片时可以移动图片排序"
                placement="top-start"
              >
                <span class="el-icon-info" style="color:#409EFF"></span>
              </el-tooltip>
            </div>

            <ul class="projset-content">
              <draggable
                :move="onMove"
                @end="dragend"
                handle=".dargBtn"
                :animation="200"
                filter=".undraggable"
              >
                <li
                  v-for="(item,index) in imageList"
                  :key="item.id"
                  :class="[canEdit ? 'draggable' : 'undraggable','liItem']"
                >
                  <div class="dargBtn">
                    <svg-icon icon-class="drag" />
                  </div>
                  <div class="deleteBtn" @click="deleteImg(item,index)">
                    <!-- el-icon-error -->
                    <i class="el-icon-error"></i>
                    <!-- <svg-icon icon-class="drag" /> -->
                  </div>

                  <img
                    class="imgItem"
                    style="width: 100%; height: 100px"
                    :src="uploadUrl+'/img/preview/'+item.id"
                  />
                </li>
              </draggable>
            </ul>
          </div>
          <!-- <div class="fileList">
            <div class="file-item" v-for="(item,index) in fileList" :key="index"></div>
          </div>-->

          <el-button size="small" type="primary" @click="onSort">保存顺序</el-button>
          <el-button size="small" type="primary" @click="openFile('03')">上传图片</el-button>
          <input class="file" ref="file" type="file" @change="httpRequest" />
        </el-form-item>
        <!-- <el-form-item label="产品介绍图" prop="image">
          <pic-upload
            :action="uploadUrl+'/file/upload?type=02'"
            :url="userForm.image"
            placeholder="上传图片"
            @on-success="imgSuccess"
          ></pic-upload>
        </el-form-item>-->
        <el-form-item label="产品图片">
          <div class="app-draggable">
            <div
              :class="canEdit ? 'dargBtn-lock el-icon-unlock' : 'dargBtn-lock el-icon-lock'"
              @click="removeEvent()"
            >
              <span>{{ canEdit? '调整图片': '锁定图片' }}</span>
              <el-tooltip
                class="item"
                effect="dark"
                content="锁定时不可移动图片,调整图片时可以移动图片排序"
                placement="top-start"
              >
                <span class="el-icon-info" style="color:#409EFF"></span>
              </el-tooltip>
            </div>

            <ul class="projset-content">
              <draggable
                :move="onMove"
                @end="dragendDescImag"
                handle=".dargBtn"
                :animation="200"
                filter=".undraggable"
              >
                <li
                  v-for="(item,index) in descImageList"
                  :key="item.id"
                  :class="[canEdit ? 'draggable' : 'undraggable','liItem']"
                >
                  <div class="dargBtn">
                    <svg-icon icon-class="drag" />
                  </div>
                  <div class="deleteBtn" @click="deleteImg(item,index)">
                    <!-- el-icon-error -->
                    <i class="el-icon-error"></i>
                    <!-- <svg-icon icon-class="drag" /> -->
                  </div>

                  <img
                    class="imgItem"
                    style="width: 100%; height: 100px"
                    :src="uploadUrl+'/img/preview/'+item.id"
                  />
                </li>
              </draggable>
            </ul>
          </div>

          <el-button size="small" type="primary" @click="onSortDescImage">保存顺序</el-button>
          <el-button size="small" type="primary" @click="openDescImage">上传图片</el-button>
          <input class="file" ref="descImag" type="file" @change="httpRequestDescImag" />
        </el-form-item>
        <el-form-item label="上传视频" prop="video" style="margin-top: 15px;">
          <video
            v-if="userForm.video"
            v-bind:src="videoUrl+'/img/preview/'+userForm.video"
            class="video-avatar"
            :autoplay="true"
            controls="controls"
            muted
            loop
          ></video>
          <div>
            <el-button size="small" type="primary" @click="onUploadVideo">上传视频</el-button>
          </div>
          <input
            type="file"
            style="display:none;"
            id="pop_video"
            ref="uploadVideo1"
            accept="video/*"
            name="fileTrans"
            @change="httpRequestVideo"
          />
        </el-form-item>
        <el-form-item label="最后更新时间">
          <el-input :disabled="true" v-model="userForm.createTime"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="onSave">更 新</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import {
  getCompanyInfo,
  updageCompanyInfo,
  uploadFile,
  fileSort,
  deleteFile,
  uploadVideoFile
} from "@/api/common";
import PicUpload from "@/components/upload/picUpload.vue";

import moment from "moment";
import draggable from "vuedraggable";
import axios from "axios";
export default {
  name: "companyInfo",
  components: { draggable, PicUpload },
  data() {
    return {
      isDisabled: true,
      isShow: false,
      canEdit: true,
      imageList: [], // 图片list
      sortList: [], //排序后的图片id
      descImageList: [], //产品介绍图片
      sortDescImageList: [],
      uploadUrl: `https://mini.qdkcompressor.com/adviser/sys`,
      videoUrl: `https://cdn.mini.qdkcompressor.com/adviser/sys`,
      isLoading: false,
      // uploadUrl: `http://101.34.62.4:8086/adviser/sys`,
      userForm: {},
      fileList: [],
      fileList2: [],
      userFormRules: {
        longitude: [{ required: true, trigger: "blur", message: "请输入经度" }],
        latitude: [{ required: true, trigger: "blur", message: "请输入纬度" }],
        content: [
          { required: true, trigger: "blur", message: "请输入公司简介" }
        ],
        image: [
          { required: true, trigger: "submit", message: "请上传产品介绍图" }
        ],
        video: [
          { required: true, trigger: "submit", message: "请上传公司视频" }
        ]
      }
    };
  },
  created() {
    this._getCompanyInfo();
  },
  watch: {
    imageList(val) {
      if (val.length !== 5) {
        this.isShow = true;
      } else {
        this.isShow = false;
      }
    }
  },
  methods: {
    // 上传图片
    imgSuccess(val) {
      this.userForm.image = val;
    },

    dragend(event) {
      //调换顺序
      let oldIndex = event.oldIndex; //移动初始位置
      let newIndex = event.newIndex; //运动终止位置
      let diff = Math.abs(newIndex - oldIndex); //插值绝对值
      let index = this.imageList[oldIndex];
      if (eval(oldIndex) > eval(newIndex)) {
        for (let i = 0; i < diff; i++) {
          this.imageList[oldIndex - i] = this.imageList[oldIndex - i - 1];
        }
        this.imageList[newIndex] = index;
      } else {
        for (let i = 0; i < diff; i++) {
          this.imageList[oldIndex + i] = this.imageList[oldIndex + i + 1];
        }
        this.imageList[newIndex] = index;
      }
    },

    onMove(relatedContext, draggedContext) {
      // console.log(relatedContext.relatedContext.list);
    },
    // 图片排序
    onSort() {
      this.sortList = [];
      this.imageList.forEach(item => {
        this.sortList.push(item.id);
      });
      fileSort(this.sortList).then(res => {
        if (res.code == 200) {
          this.$message.success("编辑图片序列成功");

          this._getCompanyInfo(); //获取公司详情
        } else {
          this.$message.error(res.msg);
        }
      });
    },

    removeEvent(item) {
      if (this.canEdit) {
        this.canEdit = false;
      } else {
        this.canEdit = true;
      }
    },
    // 获取公司信息
    _getCompanyInfo() {
      getCompanyInfo().then(res => {
        if (res.code == 200) {
          this.userForm = res.data || {};
          this.imageList = JSON.parse(
            JSON.stringify(this.userForm.attachmentEntity)
          );
          this.descImageList = JSON.parse(
            JSON.stringify(this.userForm.descImageList)
          );
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    // 删除图片
    deleteImg(item, index) {
      deleteFile(item).then(res => {
        if (res.code == 200) {
          this.$message.success("删除图片成功");

          this._getCompanyInfo(); //获取公司详情
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    // 更新公司信息
    _updageCompanyInfo(type) {
      let form = { ...this.userForm };
      form.createTime = moment().format("YYYY-MM-DD hh:mm:ss");

      updageCompanyInfo(form).then(res => {
        if (res.code == 200) {
          if (type == 1) {
            this.$message.success("更新成功");
          }

          this._getCompanyInfo();
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    openFile() {
      this.$refs.file.click();
    },

    httpRequest(event) {
      const file = event.target.files[0];
      //   创建 FormData 对象
      const formData = new FormData();
      formData.append("file", file);
      const params = { type: "01" };
      uploadFile(formData, params).then(res => {
        this.$refs.file.value = "";
        if (res.code == 200) {
          this._getCompanyInfo();
          this.$message.success("上传成功");
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    //
    openDescImage() {
      this.$refs.descImag.click();
    },

    httpRequestDescImag(event) {
      const file = event.target.files[0];
      //   创建 FormData 对象
      const formData = new FormData();
      formData.append("file", file);
      const params = { type: "03" };
      uploadFile(formData, params).then(res => {
        this.$refs.descImag.value = "";
        if (res.code == 200) {
          this._getCompanyInfo();
          this.$message.success("上传成功");
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    dragendDescImag(event) {
      //调换顺序
      let oldIndex = event.oldIndex; //移动初始位置
      let newIndex = event.newIndex; //运动终止位置
      let diff = Math.abs(newIndex - oldIndex); //插值绝对值
      let index = this.descImageList[oldIndex];
      if (eval(oldIndex) > eval(newIndex)) {
        for (let i = 0; i < diff; i++) {
          this.descImageList[oldIndex - i] = this.descImageList[
            oldIndex - i - 1
          ];
        }
        this.descImageList[newIndex] = index;
      } else {
        for (let i = 0; i < diff; i++) {
          this.descImageList[oldIndex + i] = this.descImageList[
            oldIndex + i + 1
          ];
        }
        this.descImageList[newIndex] = index;
      }
    },

    // 图片排序
    onSortDescImage() {
      this.sortDescImageList = [];
      this.descImageList.forEach(item => {
        this.sortDescImageList.push(item.id);
      });
      fileSort(this.sortDescImageList).then(res => {
        if (res.code == 200) {
          this.$message.success("编辑图片序列成功");
          this._getCompanyInfo(); //获取公司详情
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    // 上传视频
    onUploadVideo() {
      this.$refs.uploadVideo1.click();
    },
    httpRequestVideo(event) {
      const file = event.target.files[0];
      //   创建 FormData 对象
      const formData = new FormData();
      formData.append("file", file);
      // const params = { type: "01" };
      this.isLoading = true;
      uploadVideoFile(formData).then(res => {
        this.$refs.uploadVideo1.value = "";
        if (res.code == 200) {
          this.isLoading = false;
          this.userForm.video = res.data;
          this._updageCompanyInfo(2);
          this._getCompanyInfo();
          this.$message.success("上传视频成功");
        } else {
          this.isLoading = false;
          this.$message.error(res.msg);
        }
      });
    },
    onSave() {
      this._updageCompanyInfo(1);
    }
  }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.container {
  padding: 10px;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 5px;
  margin-top: 20px;
  .message-title {
    cursor: pointer;
  }
  .handle-row {
    // margin-top: 30px;
  }
}

.file {
  display: none;
}
.flex {
  display: flex;
}
.uploadListBox {
  display: flex;

  .uploader-img {
    position: relative;
    display: flex;
    margin-right: 10px;
    width: 98px;
    height: 98px;
    .imgItem {
      width: 100%;
      border-radius: 6px;
    }
    .upload-delete {
      position: absolute;
      top: 50%;
      left: 50%;
      font-size: 20px;
      margin-left: -10px;
      margin-top: -10px;
      color: #fff;
    }
    .mask {
      display: none;
      /* 1. 设置宽高和背景图片一致 */
      width: 98px;
      height: 98px;
      /* 2. 设置背景颜色 用rgba的形式设置透明度 */
      background-color: rgba(0, 0, 0, 0.3);
      /* 3. 设置绝对定位 */
      position: absolute;
      top: 0;
      left: 0;
    }

    /* 4. 鼠标经过，遮罩显示 */
  }
  .uploader-img:hover .mask {
    cursor: pointer;
    display: block;
  }
}
.app-draggable {
  background: #ffffff;
  height: 100%;

  .dargBtn-lock {
    margin: 0px 50px;
    color: #2ea9df;
  }

  .projset-content {
    list-style-type: none;
    position: relative;

    li {
      display: inline-block;
      margin: 10px;
      position: relative;
    }

    img {
      width: 100px;
      height: 100px;
    }

    span {
      justify-content: center;
      display: flex;
    }

    .dargBtn {
      position: absolute;
      line-height: 100px;
      text-align: center;
      width: 100px;
      height: 100px;
      display: none;
      color: white;
      background: rgba(101, 101, 101, 0.6);
      z-index: 9999;
    }
    .deleteBtn {
      position: absolute;
      top: -16px;
      right: -5px;
      // line-height: 100px;
      // text-align: center;
      // width: 100px;
      // height: 100px;
      // display: none;
      // color: pink;

      z-index: 9999;
    }
    .draggable {
      cursor: pointer;
      width: 100px;
      height: 100px;
    }
    .undraggable {
      width: 100px;
      height: 100px;
    }

    .draggable:hover .dargBtn {
      display: block;
    }
  }
}
.mb20 {
  margin-bottom: 20px;
}
// 内容区域样式
.bulkContainer {
  margin: 0px 20px;
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 40px;
  // background: var(--el-color-white);
}
.imgItem {
  width: 100px;
  border-radius: 6px;
}

.video-avatar {
  width: 400px;
  height: 250px;
  // position: absolute;
  // z-index: 99;
}
</style>

